import React, { useEffect, useState } from 'react'
import ReactDom from 'react-dom'
import { Button, Space } from 'antd'
const MyUseEffect = () => {
  const [count, setCount] = useState(0)
  const onClick = () => {
    setCount(count + 1)
  }
  const onDestroy = () => {
    ReactDom.unmountComponentAtNode(document.getElementById('root'))
  }
  // 回调为副作用、return的函数为清除副作用；副作用会在render之后调用，清除副作用会在状态改变或组件销毁时调用
  useEffect(() => {
    console.log(count)
    return () => {
      console.log('useEffect return')
    }
  }, [count])
  useEffect(() => {
    console.log('useEffect')
    return () => {
      console.log('destroy')
    }
  }, [])
  console.log('render')
  return (
    <>
      <div className='box'>
        <div className='box-header'>base</div>
        <div className='box-body'>
          <div className='box-content'>
            <div>count: {count}</div>
            <Space>
              <Button type='primary' onClick={onClick}>click</Button>
              <Button type='danger' onClick={onDestroy}>destroy</Button>
            </Space>
          </div>
        </div>
      </div>
    </>
  )
}
export default MyUseEffect